<style lang="less">
    .headtag {
        width: 100%;
        height: 40px;
        max-height: 40px;
        z-index: 6;
        background: #f0f0f0;
        text-align: left;
        position: relative;
        box-shadow: 0 2px 1px 1px hsla(0,0%,39%,.1);
        .tag-content{
            position: absolute;
            left: 0;
            right: 110px;
            top: 0;
            height: 100%;
            padding: 2px 10px;
            overflow:hidden;
            ul{
                //display: flex;
                //  overflow: auto;
                white-space:nowrap;
                li{
                    width: auto;
                    display: inline-block;
                }
            }
        }
        .tag-operation{
            position: absolute;
            right: 0;
            top: 0;
            box-sizing: border-box;
            padding-top: 8px;
            text-align: center;
            width: 110px;
            min-width: 110px;
            height: 100%;
            background: #fff;
            box-shadow: -3px 0 15px 3px rgba(0,0,0,.1);
            z-index: 10;
        }
    }
</style>
<template>
    <div class="headtag">
        <div class="tag-content" id="tagContent" ref="tagContent">
            <ul :style="{width: tagWidth}" id="tagUl">
                <li v-if="sytagdata !== null">
                    <Tag type="dot"
                         :id="'headTag' + sytagdata.id"
                         :color="currentTagName === sytagdata.id ? 'blue' : 'default'"
                         @click.native="tagClick(sytagdata)"
                         :name="sytagdata.id">
                        {{ sytagdata.name }}
                    </Tag>
                </li>
                <li v-for="item in tagdata">
                    <Tag type="dot"
                         :id="'headTag' + item.id"
                         :name="item.id"
                         :color="currentTagName === item.id ? 'blue' : 'default'"
                         closable
                         @on-close="onClose"
                         @click.native="tagClick(item)">
                        {{ item.name }}
                    </Tag>
                </li>
            </ul>
        </div>
        <div class="tag-operation">
            <Dropdown @on-click="tagClose">
                <Button type="primary" size="small">
                    标签选项
                    <Icon type="arrow-down-b"></Icon>
                </Button>
                <DropdownMenu slot="list">
                    <DropdownItem name="all">关闭所有</DropdownItem>
                    <DropdownItem name="other">关闭其他</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
    </div>
</template>
<script>
    import Bscroll from 'better-scroll'
    export default {
        props: {
            isHideMenu: {
                type: Boolean,
                default: false
            },
            tagdata: {
                type: Array,
                default: () => {
                    return []
                }
            },
            sytagdata: {
                type: Object,
                default: null
            },
            currentTagName: {
                type: String,
                default: 'sy'
            }
        },
        watch: {
            currentTagName: {
                handler: function (val, oldVal) {
                },
                deep: true
            }
        },
        computed: {
        },
        data () {
            return {
                tagWidth: 'auto',
                scroll: null
            }
        },
        methods: {
            onClose (e, name) {
                this.$emit('on-close', name);
                this.scrollInit()
            },
            tagClick (name) {
                this.$emit('tag-click', name)
            },
            tagClose (name) {
                if (name === 'all') {
                    this.$emit('tag-close-all')
                } else {
                    this.$emit('tag-close-other')
                }
                this.scrollInit()
            },
            scrollToReSet (val) {
                this.$nextTick(() => {
                    let tag = document.getElementById('headTag' + val)
                    let tagWidth = tag.clientWidth
                    this.scroll.scrollToElement(tag, 300, -10)
                })
            },
            scrollToReSetN (val) {
                this.$nextTick(() => {
                    this.scroll.scrollTo(-9999, 0, 300)
                })
            },
            scrollInit () {
                this.$nextTick(() => {
                    let lis = this.$refs.tagContent.getElementsByTagName('li')
                    let width = 0
                    for (let i = 0; i < lis.length; i++) {
                        width += lis[i].clientWidth
                    }
                    this.tagWidth = width + 20 + 'px'
                    this.$nextTick(() => {
                        if (this.scroll) {
                            this.scroll.refresh()
                        } else {
                            this.scroll = new Bscroll(this.$refs.tagContent, {
                                scrollX: true,
                                satrX: 0,
                                bounce: true,
                                click: true
                            })
                        }
                    })
                })
            }
        },
        mounted: function () {
            this.scrollInit()
        }
    };
</script>